<template>
  <div>
    <el-card class="total-card">
      <div class="total-card-top">
        <div class="total-card-top-div">
          <div class="count-font">1111</div>
          <div class="text-font">获赞数</div>
        </div>
        <div class="total-card-top-div">
          <div class="count-font">113</div>
          <div class="text-font">回答数</div>
        </div>
        <div class="total-card-top-div">
          <div class="count-font">888</div>
          <div class="text-font">提问数</div>
        </div>
      </div>
      <div class="total-card-bottom">
        <el-button
          type="primary"
          class="total-button"
          @click="toAckQuestionPage"
          >我要提问</el-button
        >
        <el-button
          type="primary"
          class="total-button"
          @click="toMyAnswerQuestionPage"
          >我的回答</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  methods: {
    //跳转到我要提问页面
    toAckQuestionPage() {
      this.$router.push("/community/ackquestion");
    },
    //跳转到我的回答页面
    toMyAnswerQuestionPage() {
      this.$router.push("/community/answerquestion");
    },
  },
};
</script>

<style scoped>
.total-card {
  height: 300px;
  width: 370px;
}
.total-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.total-card-top-div {
  width: 100px;
}
.count-font {
  font-size: 30px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  color: #409eff;
}
.text-font {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.total-card-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.total-button {
  width: 130px;
  height: 40px;
}
</style>